<template>
	<!-- 我的钱包 -->
	<view>
		<!-- 顶部区域 -->
		<view class="topnav">
			<navigator open-type="navigateBack">
				<image src="/static/images/back_white.png"></image>
			</navigator>
			<view class="title">我的钱包</view>
			<!-- 收益 -->
			<view class="profit">
				<view class="profit_item">
					<view class="profit_item_num">¥ {{walletInfo.receive_price}}</view>
					<view class="profit_item_title">总收入</view>
				</view>
				<view class="profit_item">
					<view class="profit_item_num">￥ {{walletInfo.pay_price}}</view>
					<view class="profit_item_title">总支出</view>
				</view>
				<view class="profit_item">
					<view class="profit_item_num">¥ {{walletInfo.balance}}</view>
					<view class="profit_item_title">可用心愿币</view>
				</view>
			</view>
		</view>
		<!-- 功能 -->
		<view class="main">
			<navigator class="item" url="./recharge">
				<view class="item_title">
					<text>钱包充值</text>
				</view>
				<image src="/static/images/more.png" class="item_more"></image>
			</navigator>
			<view class="line"></view>
			<navigator class="item" :url="`./detailed?type=0&balance=${walletInfo.balance}`">
				<view class="item_title">
					<text>收入明细</text>
				</view>
				<image src="/static/images/more.png" class="item_more"></image>
			</navigator>
			<view class="line"></view>
			<navigator class="item" :url="`./detailed?type=1&balance=${walletInfo.balance}`">
				<view class="item_title">
					<text>支出明细</text>
				</view>
				<image src="/static/images/more.png" class="item_more"></image>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				walletInfo:{
					receive_price:'0',//收入
					pay_price:'0',//支出
					balance:'0'//心愿币
				}//钱包信息
			}
		},
		onShow() {
			this.getMywalletindex();
		},
		methods: {
			getMywalletindex(){
				this.$api.mywalletindex().then(res=>{
					this.walletInfo = res;
				})
			}
		}
	}
</script>

<style lang="scss">
.topnav{
	width: 750rpx;
	height: 613rpx;
	background-image:url("../../../static/images/oneImage/beijingw.png");
	background-size: 100% 100%;
	padding: calc(var(--status-bar-height) + 50rpx) 30rpx 50rpx;
	box-sizing: border-box;
	position: relative;
	
	navigator{
		position: absolute;
		
		image {
			width: 22rpx;
			height: 40rpx;
		}
	}
	.title {
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
	}
}
.profit{
	width: 690rpx;
	border-radius: 20rpx;
	padding: 42rpx 0;
	margin-top: 98rpx;
	@include between;
	
	&_item{
		@include column-center;
		
		&_num{
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #FFFFFF;
			width: 200rpx;
			@include one;
			text-align: center;
		}
		&_title{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			margin-top: 30rpx;
		}
	}
}
.main{
	width: 690rpx;
	height: 70vh;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 30rpx;
	margin: 30rpx;
	transform: translateY(-180rpx);
	
	.item{
		@include between;
		
		&_title{
			@include between;
			
			image{
				width: 40rpx;
				height: 40rpx;
			}
			text{
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				margin-left: 20rpx;
			}
		}
		&_more{
			width: 12rpx;
			height: 24rpx;
		}
	}
	.line{
		width: 630rpx;
		height: 1rpx;
		background: #E5E5E5;
		margin: 26rpx 0;
	}
}
</style>
